<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>-->
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>
    <link href="/static/css/common_biz.css" rel="stylesheet"/>

    <title>代码生成</title>
    <style>

    </style>
    <style>

        /*字段非空样式*/
        .field-not-null {
            color: red;
        }

        .el-main {
            --el-main-padding: 0px;
        }

        /*预览表单项*/
        .preview-col-item {
            border: #ccc dashed 1px;
            border-radius: 2px;
            cursor: pointer;
        }

        /*预览表单项被选中*/
        .preview-col-item-active {
            border: #409EFF solid 1px;
        }

        /*预览表单项被选中下的操作条*/
        .preview-col-item-active > .preview-col-oper {
            border-top: #409EFF solid 1px;
        }

        /*预览表单项悬浮样式*/
        .preview-col-item:not(.preview-col-item-active):hover {
            border: #606266 dashed 1px;
        }

        /*预览表单项悬浮下的操作条样式*/
        .preview-col-item:not(.preview-col-item-active):hover > .preview-col-oper {
            border-top: #606266 dashed 1px;
        }


        /*预览版表单项操作条样式*/
        .preview-col-oper {
            padding: 0px 10px;
            border-top: #ccc dashed 1px;
            background-color: #eeeeee;
            cursor: pointer;
        }


        /*预览表单项拖拽时的定位提示*/
        .move-col-after {
            border-right: #E6A23C solid 5px;
        }

        /*预览表单项拖拽时的定位提示*/
        .move-col-before {
            border-left: #E6A23C solid 5px;
        }

        .other-config-item {
            margin-right: 30px;
            border: #ccc dashed 1px;
            padding: 0px 10px;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 5px;
        }


    </style>
</head>
<body class="skin-default">
<div id="app" class="element-app-box flex-y">
<!--        <el-row :gutter="15">-->
<!--            <el-col :span="24">-->
<!--                <el-button type="primary" @click="add">保存</el-button>-->
<!--            </el-col>-->
<!--        </el-row>-->

        <el-row :gutter="15">
            <el-col :span="24">
                <el-tabs model-value="0" class="demo-tabs">
                    <el-tab-pane label="基本信息" :lazy="true" name="0">
                        <el-form :inline="false" :model="formData" label-position="right" label-width="100px">
                            <el-row :gutter="15">
                                <el-col :span="12">
                                    <el-form-item label="数 据 表">
                                        <jo-el-data url="{URL_CMS}lowcode/db/getTableList">
                                            <template #default="scope">
                                                <el-select v-model="formData.tableName" placeholder="请选择数据表"
                                                           @change="tableChange">
                                                    <el-option :label="item.tableName" :value="item.tableName"
                                                               v-for="item in scope.data"></el-option>
                                                </el-select>
                                            </template>
                                        </jo-el-data>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="实体类名">
                                        <el-input v-model="formData.className"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="表(类)注 释">
                                        <el-input v-model="formData.name"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="链路追踪">
                                        <el-radio-group v-model="formData.extInfo.traceType">
                                            <el-radio :label="1">完整启用</el-radio>
                                            <el-radio :label="2">仅Web入口</el-radio>
                                            <el-radio :label="0">不启用</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="基础包路径">
                                        <el-input v-model="formData.packagePath"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="模 块 名">
                                        <el-input v-model="formData.moduleName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="保存路径">
                                        <el-input v-model="formData.savePath"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="服务域名">
                                        <jo-el-data url="{URL_CMS}lowcode/generate/getDomainList">
                                            <template #default="scope">
                                                <el-select v-model="formData.extInfo.webDomain" placeholder="请选择服务域名">
                                                    <el-option :label="item.value" :value="item.key"
                                                               v-for="item in scope.data"></el-option>
                                                </el-select>
                                            </template>
                                        </jo-el-data>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="作　　者">
                                        <el-input v-model="formData.author"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="24">
                                    <el-form-item label="其他属性">
                                        <div>
                                        <span class="other-config-item">
                                            <el-checkbox v-model="formData.extInfo.supportImportExcel" label="支持导入"
                                                         :true-label="1" :false-label="0"></el-checkbox>
                                        </span>
                                            <span class="other-config-item">
                                            <el-checkbox v-model="formData.extInfo.supportExportExcel" label="支持导出"
                                                         :true-label="1" :false-label="0"></el-checkbox>
                                        </span>
                                            <span class="other-config-item">
                                            <el-radio-group v-model="formData.extInfo.modelExtendsType">
                                                <el-radio :label="1">继承DbSortDO</el-radio>
                                                <el-radio :label="2">继承BaseDO模型</el-radio>
                                                <el-radio :label="3">继承并自动填充BaseDO</el-radio>
                                            </el-radio-group>
                                        </span>
                                        </div>

                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </el-form>
                    </el-tab-pane>

                    <el-tab-pane label="字段配置" :lazy="true" name="1">
                        <el-table :data="columnList" border
                                  header-cell-class-name="jo-el-table-header"
                                  :height="tableHeight">
                            <el-table-column prop="fieldDbName" label="字段" width="">
                                <template #default="scope">
                                    <span :class="{'field-not-null' : scope.row.fieldDbNotNull==1}">{{scope.row.fieldDbName}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fieldDbRemark" label="字段说明" width=""></el-table-column>
                            <el-table-column prop="fieldDbType" label="字段类型" width="150">
                                <template #default="scope">
                                    {{scope.row.fieldDbType}}
                                    <span v-if="scope.row.fieldDbLength">({{scope.row.fieldDbLength}})</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fieldJavaName" label="Java属性">
                                <template #default="scope">
                                    <el-input v-model="scope.row.fieldJavaName" size="small"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fieldJavaType" label="Java类型">
                                <template #default="scope">
                                    <el-input v-model="scope.row.fieldJavaType" size="small"></el-input>
                                </template>
                            </el-table-column>


                            <el-table-column prop="supportImport" label="支持导入">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.supportImport" :active-value="1"
                                               :inactive-value="0"></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="supportExport" label="支持导出">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.supportExport" :active-value="1"
                                               :inactive-value="0"></el-switch>
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane label="视图配置" :lazy="true" name="2">
                        <el-form :model="formData" label-position="right" label-width="100px">
                            <el-row :gutter="15">
                                <el-col :span="12">
                                    <el-form-item label="表格首列：">
                                        <jo-el-data url="{URL_CMS}lowcode/generate/getFirstColumnTypeList">
                                            <template #default="scope">
                                                <el-radio-group v-model="formData.extInfo.tableFirstColumnType">
                                                    <el-radio :label="item.key" v-for="item in scope.data">
                                                        {{item.value}}
                                                    </el-radio>
                                                </el-radio-group>
                                            </template>
                                        </jo-el-data>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="表格操作列：">
                                        <el-checkbox-group v-model="formData.extInfo.tableRowOperateButtonList">
                                            <el-checkbox label="tag_view_tr_edit">编辑</el-checkbox>
                                            <el-checkbox label="tag_view_tr_del">删除</el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <el-table :data="columnListForView" border header-cell-class-name="jo-el-table-header"
                                  :height="defaultHeight">
                            <el-table-column type="index" label="#" min-width="50" fixed="left" align="center"
                                             header-align="center"></el-table-column>
                            <el-table-column prop="fieldDbName" label="字段" min-width="160" fixed="left">
                                <template #default="scope">
                                    <div :class="{'field-not-null' : scope.row.fieldDbNotNull==1}">
                                        <div>{{scope.row.fieldDbName}}</div>
                                        <div>{{scope.row.fieldDbRemark}}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fieldDbType" label="字段类型" width="150">
                                <template #default="scope">
                                    {{scope.row.fieldDbType}}
                                    <span v-if="scope.row.fieldDbLength">({{scope.row.fieldDbLength}})</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="fieldJavaName" label="Java属性" min-width="120"></el-table-column>

                            <el-table-column prop="listHeaderTitle" label="表头标题" min-width="120">
                                <template #default="scope">
                                    <el-input v-model="scope.row.listHeaderTitle" size="small"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="listColumnShow" label="视图展示" width="100">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.listColumnShow" :active-value="1"
                                               :inactive-value="0"></el-switch>
                                </template>
                            </el-table-column>

                            <el-table-column prop="listColumnOrder" label="展示顺序" width="150">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.listColumnOrder" :min="1" :step="5"
                                                     size="small"></el-input-number>
                                </template>
                            </el-table-column>


                            <el-table-column prop="listColumnSort" label="列排序">
                                <template #default="scope">
                                    <el-switch v-model="scope.row.listColumnSort" :active-value="1"
                                               :inactive-value="0"></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="listQueryCondition" label="搜索类型" width="100">
                                <template #default="scope">
                                    <el-select v-model="scope.row.listQueryCondition" size="small">
                                        <el-option :value="item.key" :label="item.value"
                                                   v-for="item in asConditionTypeList"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>

                            <el-table-column prop="listColumnWidth" label="列宽" width="100">
                                <template #default="scope">
                                    <el-input v-model="scope.row.listColumnWidth" size="small"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="listValueFormat" label="内容格式" width="120">
                                <template #default="scope">
                                    <el-select v-model="scope.row.listValueFormat" size="small">
                                        <el-option :value="item.key" :label="item.value"
                                                   v-for="item in showFormatList"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>

                            <el-table-column prop="listHeaderAlign" label="表头align" width="135">
                                <template #default="scope">
                                    <el-radio-group v-model="scope.row.listHeaderAlign" size="small">
                                        <el-radio-button label="left">左</el-radio-button>
                                        <el-radio-button label="center">中</el-radio-button>
                                        <el-radio-button label="right">右</el-radio-button>
                                    </el-radio-group>
                                </template>
                            </el-table-column>
                            <el-table-column prop="listValueAlign" label="内容align" width="135">
                                <template #default="scope">
                                    <el-radio-group v-model="scope.row.listValueAlign" size="small">
                                        <el-radio-button label="left">左</el-radio-button>
                                        <el-radio-button label="center">中</el-radio-button>
                                        <el-radio-button label="right">右</el-radio-button>
                                    </el-radio-group>
                                </template>
                            </el-table-column>
                            <el-table-column prop="listColumnFixed" label="固定列" width="135">
                                <template #default="scope">
                                    <el-radio-group v-model="scope.row.listColumnFixed" size="small">
                                        <el-radio-button label="left">左</el-radio-button>
                                        <el-radio-button label="no">无</el-radio-button>
                                        <el-radio-button label="right">右</el-radio-button>
                                    </el-radio-group>
                                </template>
                            </el-table-column>
                            <el-table-column prop="listHeaderTips" label="表头提示" width="120">
                                <template #default="scope">
                                    <el-input v-model="scope.row.listHeaderTips" size="small"></el-input>
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane label="表单配置" :lazy="true" name="3">
                        <el-container style="padding: 0px;">
                            <el-main>
                                <el-table :data="columnListForForm" border header-cell-class-name="jo-el-table-header"
                                          :height="tableHeight">
                                    <el-table-column type="index" label="#" min-width="50" align="center" fixed="left"
                                                     header-align="center"></el-table-column>
                                    <el-table-column prop="fieldDbName" label="字段" min-width="160" fixed="left">
                                        <template #default="scope">
                                            <div :class="{'field-not-null' : scope.row.fieldDbNotNull==1}">
                                                <div>{{scope.row.fieldDbName}}</div>
                                                <div>{{scope.row.fieldDbRemark}}</div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="fieldDbType" label="字段类型" width="150">
                                        <template #default="scope">
                                            {{scope.row.fieldDbType}}
                                            <span v-if="scope.row.fieldDbLength">({{scope.row.fieldDbLength}})</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="fieldJavaName" label="Java属性"
                                                     min-width="120"></el-table-column>

                                    <el-table-column prop="formControlTitle" label="表单项标题" min-width="120">
                                        <template #default="scope">
                                            <el-input v-model="scope.row.formControlTitle" size="small"></el-input>
                                        </template>
                                    </el-table-column>


                                    <el-table-column prop="formColumnShow" label="表单展示" width="100">
                                        <template #default="scope">
                                            <el-switch v-model="scope.row.formColumnShow" :active-value="1"
                                                       :inactive-value="0"></el-switch>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="formColumnOrder" label="显示顺序" width="150">
                                        <template #default="scope">
                                            <el-input-number v-model="scope.row.formColumnOrder" :min="1" :step="5"
                                                             size="small"></el-input-number>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="formColumnGridWidth" label="栅格宽度" width="150">
                                        <template #default="scope">
                                            <el-input-number v-model="scope.row.formColumnGridWidth" size="small"
                                                             :min="1"
                                                             :max="24"></el-input-number>
                                        </template>
                                    </el-table-column>

                                    <el-table-column prop="formControlType" label="控件类型" width="100">
                                        <template #default="scope">
                                            <el-select v-model="scope.row.formControlType" size="small">
                                                <el-option :value="item.key" :label="item.value"
                                                           v-for="item in controlTypeList"></el-option>
                                            </el-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="150" fixed="right">
                                        <template #default="scope">
                                            <el-button v-if="!(curCol && curCol.fieldDbName==scope.row.fieldDbName)"
                                                       type="text"
                                                       @click="colDetail(scope.row)">详情
                                            </el-button>
                                            <el-button v-if="curCol && curCol.fieldDbName==scope.row.fieldDbName"
                                                       type="text"
                                                       @click="colDetail(scope.row)"><span style="color: red;">详情</span>
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-main>

                            <el-aside>
                                <el-scrollbar>
                                    <div style="padding: 0px 15px;">
                                        <div v-if="curCol" style="font-weight: bold;padding-bottom: 8px;">
                                            字段：{{curCol.fieldDbName}}
                                        </div>
                                        <el-form label-width="120px" v-if="curCol" label-position="top">
                                            <el-form-item label="表单控件类型">
                                                <el-select v-model="curCol.formControlType">
                                                    <el-option :value="item.key" :label="item.value"
                                                               v-for="item in controlTypeList"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="placeholder">
                                                <el-input v-model="curCol.formControlPlaceholder"></el-input>
                                            </el-form-item>
                                            <template v-if="curCol && curCol.formControlDataSource">
                                                <el-form-item label="数据URL">
                                                    <el-input v-model="curCol.formControlDataSource.dataUrl"
                                                              placeholder="数据URL"></el-input>
                                                </el-form-item>
                                                <el-form-item label="值字段">
                                                    <el-input v-model="curCol.formControlDataSource.keyField"
                                                              placeholder="值字段"></el-input>
                                                </el-form-item>
                                                <el-form-item label="文本字段">
                                                    <el-input v-model="curCol.formControlDataSource.valueField"
                                                              placeholder="文本字段"></el-input>
                                                </el-form-item>
                                            </template>
                                        </el-form>
                                    </div>
                                </el-scrollbar>
                            </el-aside>
                        </el-container>

                    </el-tab-pane>

                    <el-tab-pane label="表单配置(预览版)" :lazy="true" name="4">
                        <el-container style="padding: 0px;border: 1px solid #eee"
                                      :style="{'height' : windowHeight - 85 + 'px'}">
                            <el-aside>
                                <div style="padding: 0px 15px;">
                                    <el-divider border-style="dashed">可选字段</el-divider>
                                    <template v-for="item in columnListForForm">
                                        <div style="border: #ccc dashed 1px;padding: 10px;border-radius: 2px;margin-bottom: 10px;display: flex;justify-content: space-between;align-items: center;"
                                             v-if="item.formColumnShow == 0">
                                            <el-tag effect="plain">{{item.fieldJavaName}} : {{item.formControlTitle}}
                                            </el-tag>
                                            <el-switch v-model="item.formColumnShow" :active-value="1"
                                                       :inactive-value="0"></el-switch>
                                        </div>
                                    </template>
                                </div>
                            </el-aside>
                            <el-main style="border-left: 1px solid #eee;border-right: 1px solid #eee;">
                                <el-scrollbar wrap-class="previewBoxScroll">
                                    <el-form :label-width="formData.formLabelWidth"
                                             :label-position="formData.formLabelPosition">
                                        <div style="padding: 7.5px;">
                                            <el-row :gutter="10" class="jo-el-row-vertical-gutter">
                                                <template v-for="item in columnListForFormDrag">
                                                    <el-col :span="item.formColumnGridWidth"
                                                            v-if="item.formColumnShow == 1">
                                                        <div draggable="true"
                                                             ondragstart="moveColumnStart()"
                                                             ondrag="moveColumnIng()"
                                                             ondragend="moveColumnEnd()"
                                                             class="preview-col-item"
                                                             :class="{'preview-col-item-active' : curCol && curCol.fieldDbName == item.fieldDbName}"
                                                             @click="colDetail(item)"
                                                             :dataColId="item.fieldDbName">
                                                            <div style="padding: 10px;padding-bottom: 0px;">
                                                                <el-form-item :label="item.formControlTitle">
                                                                    <template v-if="item.formControlType == 'input'">
                                                                        <el-input
                                                                                :placeholder="item.formControlPlaceholder"></el-input>
                                                                    </template>
                                                                    <template
                                                                            v-else-if="item.formControlType == 'date'">
                                                                        <el-date-picker type="date"
                                                                                        :placeholder="item.formControlPlaceholder"></el-date-picker>
                                                                    </template>
                                                                    <template
                                                                            v-else-if="item.formControlType == 'time'">
                                                                        <el-date-picker type="datetime"
                                                                                        :placeholder="item.formControlPlaceholder"></el-date-picker>
                                                                    </template>
                                                                    <template
                                                                            v-else-if="item.formControlType == 'select'">
                                                                        <el-select
                                                                                :placeholder="item.formControlPlaceholder">
                                                                            <el-option value="" label=""></el-option>
                                                                        </el-select>
                                                                    </template>
                                                                    <template
                                                                            v-else-if="item.formControlType == 'textarea'">
                                                                        <el-input :rows="2" type="textarea"
                                                                                  :placeholder="item.formControlPlaceholder"></el-input>
                                                                    </template>
                                                                    <template
                                                                            v-else-if="item.formControlType == 'switch'">
                                                                        <el-switch :model-value="true"></el-switch>
                                                                    </template>
                                                                    <template
                                                                            v-else-if="item.formControlType == 'radio'">
                                                                        <el-radio-group>
                                                                            <el-radio :label="3">Option A</el-radio>
                                                                            <el-radio :label="6">Option B</el-radio>
                                                                        </el-radio-group>
                                                                    </template>
                                                                    <template
                                                                            v-else-if="item.formControlType == 'checkbox'">
                                                                        <el-checkbox-group>
                                                                            <el-checkbox label="Option A"></el-checkbox>
                                                                            <el-checkbox label="Option B"></el-checkbox>
                                                                        </el-checkbox-group>
                                                                    </template>
                                                                    <template
                                                                            v-else-if="item.formControlType == 'label'">
                                                                        <el-tag>label</el-tag>
                                                                    </template>
                                                                    <template v-else="">
                                                                        <el-input
                                                                                :placeholder="item.formControlPlaceholder"></el-input>
                                                                    </template>
                                                                </el-form-item>
                                                            </div>
                                                            <div class="preview-col-oper">
                                                                <el-form :inline="true" label-position="left"
                                                                         size="small">
                                                                    <el-form-item label="">
                                                                        <el-switch v-model="item.formColumnShow"
                                                                                   :active-value="1"
                                                                                   :inactive-value="0"></el-switch>
                                                                    </el-form-item>
                                                                    <el-form-item label="">
                                                                        <el-input-number
                                                                                v-model="item.formColumnGridWidth"
                                                                                size="small" :min="1"
                                                                                :max="24"></el-input-number>
                                                                    </el-form-item>
                                                                    <el-form-item label="">
                                                                        <el-select v-model="item.formControlType"
                                                                                   size="small">
                                                                            <el-option :value="item.key"
                                                                                       :label="item.value"
                                                                                       v-for="item in controlTypeList"></el-option>
                                                                        </el-select>
                                                                    </el-form-item>
                                                                </el-form>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                </template>

                                            </el-row>

                                        </div>

                                    </el-form>
                                </el-scrollbar>
                            </el-main>
                            <el-aside>
                                <div style="padding: 0px 15px;">
                                    <el-tabs model-value="first">
                                        <el-tab-pane label="表单项配置" name="first">
                                            <el-scrollbar>
                                                <el-form label-width="120px" v-if="curCol" label-position="top">
                                                    <el-form-item label="标题">
                                                        <el-input v-model="curCol.formControlTitle"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="placeholder">
                                                        <el-input v-model="curCol.formControlPlaceholder"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="宽度" style="margin-bottom: 30px;">
                                                        <el-slider v-model="curCol.formColumnGridWidth" :min="1"
                                                                   :max="24"
                                                                   size="small"
                                                                   :marks="{1:'1',6:'6',12:'12',18:'18',24:'24'}"
                                                                   style="width: 230px;margin-left: 12px;"></el-slider>
                                                    </el-form-item>
                                                    <el-form-item label="控件类型">
                                                        <el-select v-model="curCol.formControlType">
                                                            <el-option :value="item.key" :label="item.value"
                                                                       v-for="item in controlTypeList"></el-option>
                                                        </el-select>
                                                    </el-form-item>

                                                    <template v-if="curCol && curCol.formControlDataSource">

                                                        <el-form-item label="选项数据源" v-if="showOptionDataSource">
                                                            <div>
                                                                <el-radio-group
                                                                        v-model="curCol.formControlDataSource.dataType">
                                                                    <el-radio-button label="static">静态数据
                                                                    </el-radio-button>
                                                                    <el-radio-button label="url">URL</el-radio-button>
                                                                    <el-radio-button label="dict">字典</el-radio-button>
                                                                </el-radio-group>
                                                            </div>

                                                            <div style="padding: 10px 0px;"
                                                                 v-if="curCol.formControlDataSource.dataType == 'static'">
                                                                <el-row v-for="(op, opIdx) in curCol.formControlDataSource.optionItemList"
                                                                        style="margin-bottom: 5px;">
                                                                    <el-col :span="10">
                                                                        <el-input v-model="op.key" placeholder="值"
                                                                                  size="small"></el-input>
                                                                    </el-col>
                                                                    <el-col :span="1"></el-col>
                                                                    <el-col :span="10">
                                                                        <el-input v-model="op.value" placeholder="文案"
                                                                                  size="small"></el-input>
                                                                    </el-col>
                                                                    <el-col :span="3">
                                                                        <div style="text-align: center;">
                                                                            <el-button type="danger" circle size="small"
                                                                                       @click="deleteOptionItem(opIdx)">
                                                                                <i class="fa fa-minus"
                                                                                   aria-hidden="true"></i>
                                                                            </el-button>
                                                                        </div>
                                                                    </el-col>
                                                                </el-row>
                                                                <div style="clear: both;display: block;width: 200px;">
                                                                    &nbsp;<el-button type="text" size="small"
                                                                                     @click="addOptionItem">添加选项
                                                                </el-button>
                                                                </div>
                                                            </div>

                                                            <div style="padding: 10px 0px;"
                                                                 v-if="curCol.formControlDataSource.dataType == 'url'">
                                                                <el-form-item style="margin-bottom: 5px;">
                                                                    <el-input
                                                                            v-model="curCol.formControlDataSource.dataUrl"
                                                                            placeholder="数据Url" size="small">
                                                                        <template #prepend>URL</template>
                                                                    </el-input>
                                                                </el-form-item>
                                                                <el-form-item style="margin-bottom: 5px;">
                                                                    <el-input
                                                                            v-model="curCol.formControlDataSource.keyField"
                                                                            placeholder="值字段" size="small">
                                                                        <template #prepend>值字段</template>
                                                                    </el-input>
                                                                </el-form-item>
                                                                <el-form-item>
                                                                    <el-input
                                                                            v-model="curCol.formControlDataSource.valueField"
                                                                            placeholder="文本字段" size="small">
                                                                        <template #prepend>文本字段</template>
                                                                    </el-input>
                                                                </el-form-item>
                                                            </div>
                                                            <div style="padding: 10px 0px;"
                                                                 v-if="curCol.formControlDataSource.dataType == 'dict'">
                                                                暂无字典~
                                                            </div>

                                                        </el-form-item>

                                                        <el-form-item label="表单校验" v-if="curCol.formControlCheckRule">
                                                            <!--                                                        {{curCol.v_checkRuleList}}-->
                                                            <el-select v-model="curCol.v_checkRuleTypeList"
                                                                       multiple
                                                                       collapse-tags
                                                                       collapse-tags-tooltip
                                                                       @change="checkRuleListChange">
                                                                <el-option :value="item.key" :label="item.value"
                                                                           v-for="item in controlCheckList"></el-option>
                                                            </el-select>
                                                            <div v-for="check in curCol.formControlCheckRule.checkRuleList"
                                                                 style="margin-top: 8px;border: #ccc dashed 1px;padding: 8px;line-height: 1.7;">
                                                                <el-tag style="margin-bottom: 5px;">
                                                                    {{getCheckRuleName(check.checkType)}}
                                                                </el-tag>
                                                                <el-input v-model="check.errorTips" placeholder="错误提示文案"
                                                                          size="small"
                                                                          style="margin-bottom: 5px;"></el-input>
                                                                <el-input v-if="check.checkType=='ErrReg'"
                                                                          v-model="check.checkReg" :row="2"
                                                                          placeholder="正则表达式" size="small"
                                                                          style="margin-bottom: 5px;"></el-input>
                                                                <template
                                                                        v-if="check.checkType=='ErrLength' || check.checkType=='ErrNumber'">
                                                                    <el-input v-model="check.min" placeholder="下限"
                                                                              size="small" style="width: 40%"
                                                                              style="margin-bottom: 5px;"></el-input>
                                                                    ~
                                                                    <el-input v-model="check.max" placeholder="上限"
                                                                              size="small" style="width: 40%"
                                                                              style="margin-bottom: 5px;"></el-input>
                                                                </template>
                                                            </div>
                                                        </el-form-item>
                                                    </template>

                                                </el-form>
                                            </el-scrollbar>
                                        </el-tab-pane>
                                        <el-tab-pane label="全局配置" name="second">
                                            <el-scrollbar>
                                                <el-form label-position="top" label-width="140px">
                                                    <el-form-item label="表单项标题位置">
                                                        <el-radio-group v-model="formData.formLabelPosition">
                                                            <el-radio-button label="left"></el-radio-button>
                                                            <el-radio-button label="top"></el-radio-button>
                                                            <el-radio-button label="right"></el-radio-button>
                                                        </el-radio-group>
                                                    </el-form-item>
                                                    <el-form-item label="表单项标题宽度">
                                                        <el-input v-model="formData.formLabelWidth"></el-input>
                                                    </el-form-item>
                                                </el-form>
                                            </el-scrollbar>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </el-aside>
                        </el-container>

                    </el-tab-pane>

                </el-tabs>
            </el-col>
        </el-row>

</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<script src="/static/plugin/layer/layer.js"></script>
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<script src="/static/js/common_biz.js"></script>
<!--<script src="D:\dev\workspace\qingyun\qingyun-static\src\main\resources\static\js\lowcode\generateForm.js"></script>-->
<script src="/static/js/lowcode/generateForm.js"></script>

<script type="text/javascript">


</script>

</body>
</html>
